<template>
  <div class="hideScrollBar" style="position: relative">
    <!-- 内容 -->
    <div
      class="descview"
      :class="{
        'descview-bottom-iphonex': globalStore.$state.IsIphoneX,
        'descview-bottom': !globalStore.$state.IsIphoneX,
      }"
      ref="scrollEl"
    >
      <div class="content">
        <!-- 导航 -->
        <NavBar
          :title="t('mvp.desc.text1')"
          isTransparent
          :navScorllOffset="30"
          navScorllColor="#FFF"
          :scrollEl="scrollEl"
          @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
          :customBackFn="handleBack"
          isFixed
        />
        <!-- 每日活跃 -->
        <div class="group" style="margin-top: 10px">
          <div class="items-center group-title">
            <ImagesClient
              style="margin-right: 10px"
              src="/image/mvp/desc/num1.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text2") }}
            </div>
          </div>
          <div
            class="items-center group-row-first col-left-radius col-right-radius"
            style="margin-top: 10px"
          >
            <div class="col-first-row col col-first">
              {{ t("mvp.desc.text3") }}
            </div>
            <div class="col-first-row col col-center">
              {{ t("mvp.desc.text4") }}
            </div>
            <div class="col-first-row col col-end">
              {{ t("mvp.desc.text5") }}
            </div>
          </div>
          <div class="items-center">
            <div class="col col-first items-center">
              <ImagesClient
                style="width: 32px"
                src="/image/mvp/desc/leve0.svg"
              ></ImagesClient>
            </div>
            <div class="col col-center">2</div>
            <div class="col col-end">08:00 - 23:00</div>
          </div>
          <div class="items-center">
            <div class="col col-first items-center">
              <ImagesClient
                style="width: 32px"
                src="/image/mvp/desc/leve1.svg"
              ></ImagesClient>
            </div>
            <div class="col col-center">3</div>
            <div class="col col-end">08:00 - 23:00</div>
          </div>
          <div class="items-center">
            <div class="col col-first items-center">
              <ImagesClient
                style="width: 32px"
                src="/image/mvp/desc/leve2.svg"
              ></ImagesClient>
            </div>
            <div class="col col-center">4</div>
            <div class="col col-end">08:00 - 23:00</div>
          </div>
          <div class="items-center">
            <div class="col col-first items-center">
              <ImagesClient
                style="width: 32px"
                src="/image/mvp/desc/leve3.svg"
              ></ImagesClient>
            </div>
            <div class="col col-center">6</div>
            <div class="col col-end">08:00 - 23:00</div>
          </div>
          <div
            class="items-center"
            style="
              border-bottom-left-radius: 24px;
              border-bottom-right-radius: 24px;
              overflow: hidden;
              border-bottom-width: 10px;
              padding-bottom: 6px;
            "
          >
            <div class="col col-first items-center">
              <ImagesClient
                style="width: 32px"
                src="/image/mvp/desc/leve4.svg"
              ></ImagesClient>
            </div>

            <div class="col col-center" style="border-bottom: none">6</div>
            <div class="col col-end" style="border-bottom: none">
              08:00 - 23:00
            </div>
          </div>
          <div
            class="desc items-center"
            style="margin-top: 10px; align-items: flex-start"
          >
            <ImagesClient
              style="width: 10px; margin: 3px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text6") }}
            </div>
          </div>
          <div
            class="desc items-center"
            style="margin-top: 10px; align-items: flex-start"
          >
            <ImagesClient
              style="width: 10px; margin: 3px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text_cg15") }}
            </div>
          </div>
        </div>
        <!-- 挖矿奖励 -->
        <div class="group">
          <div class="items-center group-title">
            <ImagesClient
              style="margin-right: 10px"
              src="/image/mvp/desc/num2.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ $t("mvp.wkjl") }}
            </div>
          </div>
          <div class="group-text" style="margin-top: 10px">
            {{ t("mvp.desc.text8") }}
          </div>
          <div
            class="col col-first-row col-left-radius col-right-radius group-row-first"
            style="width: 100%; margin-top: 10px"
          >
            {{ t("mvp.desc.text9") }}
          </div>
          <ClientOnly>
            <template v-for="(item, index) in pageData.list">
              <div
                :key="index"
                class="col items-center pb12"
                style="width: 100%; box-sizing: content-box"
                v-if="item.bdc"
                :class="{
                  pt10: index === 0,
                  'bottom-radius': index + 1 === pageData.list.length,
                }"
              >
                <ImagesClient class="col-yd" :src="item.img"></ImagesClient>
                <div class="col-rightview">
                  <div class="col-rightview-title" style="text-align: left">
                    {{ item.title }}
                  </div>
                  <div class="items-center col-rightview-bottom">
                    <ImagesClient
                      class="col-rightview-icon"
                      src="/image/mvp/desc/bdc.svg"
                    ></ImagesClient>
                    <div class="col-rightview-text">{{ item.bdc }}</div>
                  </div>
                </div>
              </div>
            </template>
          </ClientOnly>
        </div>
        <!-- 宝箱品级 -->
        <div class="group" style="padding: 15px 0">
          <div class="items-center group-title" style="margin-left: 10px">
            <ImagesClient
              style="margin-right: 10px"
              src="/image/mvp/desc/num3.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text18") }}
            </div>
          </div>

          <div class="box">
            <!-- 木 -->
            <div class="items-center box-between" style="width: 100%">
              <img class="box-icon" src="/image/mvp/desc/box1.png" />
              <div class="box-right">
                <div
                  class="items-center"
                  style="justify-content: space-between"
                >
                  <div class="box-title">{{ t("mvp.desc.text19") }}</div>
                  <div class="items-center col-rightview-bottom">
                    <ImagesClient
                      class="col-rightview-icon"
                      src="/image/mvp/desc/bdc.svg"
                    ></ImagesClient>
                    <div class="col-rightview-text">10BDC</div>
                  </div>
                </div>
                <div class="box-value">{{ t("mvp.desc.text20") }}</div>
              </div>
            </div>
            <!-- 铁 -->
            <div class="items-center box-between" style="width: 100%">
              <img class="box-icon" src="/image/mvp/desc/box2.png" />
              <div class="box-right">
                <div
                  class="items-center"
                  style="justify-content: space-between"
                >
                  <div class="box-title">
                    {{ $t("mvp.jlbx") }}
                  </div>
                  <div class="items-center col-rightview-bottom">
                    <ImagesClient
                      class="col-rightview-icon"
                      src="/image/mvp/desc/bdc.svg"
                    ></ImagesClient>
                    <div class="col-rightview-text">50BDC</div>
                  </div>
                </div>
                <div class="box-value">{{ t("mvp.desc.text20") }}</div>
              </div>
            </div>
            <!-- 黄金 -->
            <div class="items-center box-between" style="width: 100%">
              <img class="box-icon" src="/image/mvp/desc/box3.png" />
              <div class="box-right">
                <div
                  class="items-center"
                  style="justify-content: space-between"
                >
                  <div class="box-title">{{ t("mvp.desc.text22") }}</div>
                  <div class="items-center col-rightview-bottom">
                    <ImagesClient
                      class="col-rightview-icon"
                      src="/image/mvp/desc/bdc.svg"
                    ></ImagesClient>
                    <div class="col-rightview-text">100BDC</div>
                  </div>
                </div>
                <div class="box-value">{{ t("mvp.desc.text20") }}</div>
              </div>
            </div>
            <!-- 华丽 -->
            <div class="items-center" style="width: 100%">
              <img class="box-icon" src="/image/mvp/desc/box4.png" />
              <div class="box-right">
                <div
                  class="items-center"
                  style="justify-content: space-between"
                >
                  <div class="box-title">{{ t("mvp.desc.text23") }}</div>
                  <div class="items-center col-rightview-bottom">
                    <ImagesClient
                      class="col-rightview-icon"
                      src="/image/mvp/desc/bdc.svg"
                    ></ImagesClient>
                    <div class="col-rightview-text">10000BDC</div>
                  </div>
                </div>
                <div class="box-value">{{ t("mvp.desc.text20") }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 其他方式获得BDC -->
        <div class="other">
          <div class="items-center group-title">
            <ImagesClient
              style="margin-right: 10px"
              src="/image/mvp/desc/num4.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ $t("mvp.qtfshdbdc") }}
            </div>
          </div>
          <!-- 文本 -->
          <div class="other-list">
            <div
              class="other-list-item"
              v-for="(item, index) in pageData.entryPermissions"
              :key="item.jumpId"
              :class="{
                'other-list-item-notBorder':
                  pageData.entryPermissions.length == index + 1,
              }"
              @click="jumpPage(item.jumpId, item.isApp, index)"
            >
              <div class="other-list-item-top items-center">
                <div class="other-list-item-top-title">
                  {{ item.title }}
                </div>
                <img
                  class="other-list-item-top-jt"
                  src="/image/mining/mining-right-jt.svg"
                />
              </div>
              <div class="other-list-item-bottom">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <!-- 相关规则 -->
        <div class="group" style="padding-bottom: 10px">
          <div class="items-center group-title" style="margin-bottom: 20px">
            <ImagesClient
              style="margin-right: 10px"
              src="/image/mvp/desc/num5.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text24") }}
            </div>
          </div>

          <div class="group-text items-start">
            <ImagesClient
              style="width: 10px; margin: 4px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>

            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text25") }}
            </div>
          </div>
          <div class="group-text items-start">
            <ImagesClient
              style="width: 10px; margin: 4px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>

            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text26") }}
            </div>
          </div>
          <div class="group-text items-start">
            <ImagesClient
              style="width: 10px; height: 8px; margin: 4px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text28") }}
            </div>
          </div>
          <div class="group-text items-start">
            <ImagesClient
              style="width: 10px; margin: 4px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>

            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text27") }}
            </div>
          </div>

          <div class="group-text items-start">
            <ImagesClient
              style="width: 10px; margin: 4px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>

            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text29") }}
            </div>
          </div>
          <div class="group-text items-start">
            <ImagesClient
              style="width: 10px; margin: 4px 7px 0 0"
              src="/image/pledge/title-icon.svg"
            ></ImagesClient>
            <div style="flex: 1; word-break: break-word">
              {{ t("mvp.desc.text30") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部悬浮按钮 -->
    <div class="footer" @click="jumpPage('taskCenter', true)">
      <div class="footer-btn items-center">
        <div class="footer-btn-text">{{ $t("mvp.moreBdc") }}</div>
      </div>
    </div>
  </div>
</template>

<script setup name="mvp">
import ImagesClient from "~/components/public/Images.client.vue";
import { getTaskRewardList } from "../../../api/bdc";
import { queryAirdropConfig } from "@/api/airdrop";
import { JUMPAPPS } from "~/config";
import { navigateI18nTo, isAndroid, navigateBack } from "@/utils";
import { getLatestStudioLive } from "@/api/reward";
import { useUserStore } from "~~/store/modules/user";
import { useGlobalStore } from "~~/store/global";
import { usePageCacheStore } from "../store/modules/pageCache";

// definePageMeta({
//   keepalive: true,
// });

const { t } = useI18n();
const globalStore = useGlobalStore();
const pageCache = usePageCacheStore();
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase
const userState = useUserStore();
const scrollEl = ref();
// 页面属性
const pageData = reactive({
  navBarHeight: 0,
  // 类型: 2:实名认证 31:首次充值 17:手机号绑定 26:社区任务-发帖2.0 27:社区任务-点赞2.0 28:社区任务-评论2.0 29:每日交易 30:每日活跃宝箱
  list: [
    {
      title: t("mvp.desc.text10"),
      type: 29,
      img: "/image/mvp/desc/spjy-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text11"),
      type: 26,
      img: "/image/mvp/desc/sqft-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text12"),
      type: 28,
      img: "/image/mvp/desc/sqpl-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text13"),
      type: 27,
      img: "/image/mvp/desc/sqdz-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text14"),
      type: 2,
      img: "/image/mvp/desc/smrz-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text15"),
      type: 17,
      img: "/image/mvp/desc/bdsj-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text15"),
      type: 31,
      img: "/image/mvp/desc/cz-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text16"),
      type: 18,
      img: "/image/mvp/desc/mrqd-icon.svg",
      bdc: null, // 不显示
    },
    {
      title: t("mvp.desc.text11"),
      type: 30,
      img: "/image/mvp/desc/hybx-icon.svg",
      bdc: null, // 不显示
    },
  ],
  entryPermissions: [
    {
      title: t("mvp.jfdhbdc"),
      desc: t("mvp.jfdhbdcDesc"),
      jumpId: "exchangePoints",
      isApp: false,
    },
    {
      title: t("airdrop.bdckt"),
      desc: t("mvp.xyktDesc"),
      jumpId: "airdrop",
      isApp: false,
    },
    {
      title: t("lottery.pageTitle"),
      desc: t("mvp.lotteryDesc"),
      jumpId: "lottery",
      isApp: false,
    },
    // {
    //   title: t("mvp.kzbjl"),
    //   desc: t("mvp.kzbjldesc"),
    //   jumpId: "live",
    //   isApp: true,
    // },
    {
      title: t("mvp.yqhy"),
      desc: t("mvp.yqhyDesc"),
      jumpId: "inviteFriends",
      isApp: true,
    },
    {
      title: t("pledge.pageTitle"),
      desc: t("mvp.pledgeDesc"),
      jumpId: "pledge",
      isApp: false,
    },
    {
      title: t("activity.dhmTitle"),
      desc: t("mvp.codeDesc"),
      jumpId: "redeemCode",
      isApp: false,
    },
  ], // 入口权限数组
  accountType: 0, // 0:普通用户账号 1:测试号 2:官方主播
  liveId: "", // 直播间 id
  superWiner: false, // 抽美金
  reactiveStatus: false, // 唤活活动:是否正常展示,反之已下线
  raffleStatus: false, // 抽奖:是否正常展示,反之已下线
  exchangeCodeStatus: false, // 兑换码:是否正常展示,反之已下线
  airdropActivityShowStatus: false, // 空投:是否正常展示,反之已下线
});

const backPageOffset = (offset) => {
  if (scrollEl.value) {
    scrollEl.value.scrollTo({
      top: Number(offset),
      behavior: "smooth",
    });
  }
};

onMounted(() => {
  // 1. 埋点访问
  firebase?.logEvent("BDC_H5_Mining_Desc_PUV", {
    time: Date.now(),
  });
  // 2. 获取奖励数值
  getTaskRewardList().then((res) => {
    if (res) {
      // pageData.listArr
      // 1. 过滤掉不属于的数据
      const arr = res.filter((e) => {
        return [1, 2, 3].includes(e.sendAmountType);
      });
      // 2. 映射赋值
      arr.forEach((element) => {
        pageData.list.forEach((e) => {
          if (element.taskType == e.type) {
            if (e.type == 30 || e.type == 18) {
              if (!element.sendAmount) {
                e.bdc = t("mvp.desc.text_sjsl");
              } else {
                e.bdc = `${element.sendAmount}BDC`;
              }
            } else if (e.type == 29) {
              e.bdc = element.sendAmount
                ? `${element.sendAmountType}${t("mvp.other.text8")}=${
                    element.sendAmount
                  }BDC`
                : "";
            } else {
              e.bdc = element.sendAmount ? `${element.sendAmount}BDC` : "";
            }
            e.title = element.tradeTypeShow;
          }
        });
      });
      // console.log("--奖励数值：", pageData.list);
    }
  });
  // 3. 获取入口权限
  queryAirdropConfig({ cache: true })
    .then((res) => {
      // console.log("--聚合入口--", res);
      if (res) {
        // 抽美金
        pageData.superWiner = res.superWiner == 1 && res.accountType == 0;
        // 抽奖
        pageData.raffleStatus = res.raffleStatus == 1;
        // 空投
        pageData.airdropActivityShowStatus = res.airdropActivityShowStatus == 1;
        // 7 日焕活
        pageData.reactiveStatus = res.reactiveStatus == 1;
        // 兑换码
        pageData.exchangeCodeStatus = res.exchangeCodeStatus == 1;
        // 特殊名单
        pageData.accountType = res.accountType;
      }
    })
    .then(() => {
      nextTick(() => {
        const offsetTop = pageCache.getPageData("desc-activity-refIdx");
        // console.log("--000000--", offsetTop);
        if (offsetTop)
          backPageOffset(
            Number(offsetTop) + Number(pageData.navBarHeight) + 54
          );
      });
    });

  //  4. 滚动到上次跳转的位置
  // setTimeout(() => {

  // }, 500);
});
// 获取直播间数据
const getLatestStudioLiveRequest = () => {
  return getLatestStudioLive({
    discoverType: 6,
    areaCode: userState.$state.areaCode,
  }).then((res) => {
    // console.log("直播间数据", res);
    if (res) {
      if (
        res.commonData &&
        res.commonData.discoveryList &&
        res.commonData.discoveryList.length > 0
      ) {
        res.commonData.discoveryList.forEach((e) => {
          if (e.data_type == 3 && e.live_status) {
            pageData.liveId = e.live_status.live_id;
          }
        });
      } else {
        pageData.liveId = "";
      }
    }
  });
};

// 点击-页面跳转
const jumpPage = async (val, isApp = false, index) => {
  if (scrollEl.value) {
    pageCache.addPageData(
      "desc-activity-refIdx",
      scrollEl.value.scrollTop || 0,
      20 * 60 * 1000
    );
  }

  if (isApp) {
    if (val == "live") {
      firebase?.logEvent("BDC_H5_MiningDesc_Click_Live_Jump");
      // 1. loading
      showLoadingToast({
        message: `${t("common.requestIng")} ...`,
        forbidClick: true,
        duration: 15000,
        wordBreak: "break-word",
      });
      getLatestStudioLiveRequest().then(() => {
        if (pageData.liveId) {
          bridge.jumpAppRoute(
            JUMPAPPS({ liveId: pageData.liveId })["liveRoom"]
          );
        } else {
          showToast(t("activity.zbyjs"));
        }
      });
    } else if (val === "inviteFriends") {
      firebase?.logEvent("BDC_H5_MiningDesc_Click_inviteFriends");
      const inviteFriends = JUMPAPPS()["inviteFriends"]();
      bridge.jumpAppRoute(
        inviteFriends.routeKey,
        isAndroid.value,
        inviteFriends
      );
    } else if (val === "taskCenter") {
      bridge.jumpAppRoute(JUMPAPPS()[val]);
    }
  } else if (val === "redeemCode") {
    if (pageData.exchangeCodeStatus && pageData.accountType == 0) {
      navigateI18nTo({
        path: "/activity/redeemCode",
      });
    } else {
      showToast(t("common.zwqx"));
    }
  } else if (val === "pledge") {
    firebase?.logEvent("BDC_H5_MiningDesc_Click_Pledge_Jump");
    navigateI18nTo({
      path: "/pledge",
    });
  } else if (val === "airdrop") {
    if (pageData.airdropActivityShowStatus && pageData.accountType == 0) {
      firebase?.logEvent("BDC_H5_MiningDesc_Click_Airdrop_Jump");
      navigateI18nTo({
        path: "/airdrop",
      });
    } else showToast(t("common.zwqx"));
  } else if (val === "lottery") {
    if (pageData.raffleStatus && pageData.accountType == 0) {
      firebase?.logEvent("BDC_H5_MiningDesc_Click_Lottery_Jump");
      navigateI18nTo({
        path: "/lottery",
      });
    } else showToast(t("common.zwqx"));
  } else if (val === "exchangePoints") {
    if (pageData.raffleStatus && pageData.accountType == 0) {
      firebase?.logEvent("BDC_H5_MiningDesc_Click_Lottery_Jump");
      navigateI18nTo({
        path: "/mvp/exchangePoints",
      });
    } else showToast(t("common.zwqx"));
  }
};

// 返回上一级
const handleBack = () => {
  pageCache.removeData("desc-activity-refIdx");
  navigateBack(-1);
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 99999;
  background-color: #fff;
  padding: 11 * 2px 15 * 2px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding-bottom: var(--safe-area-inset-bottom);
  &-btn {
    background-color: #007bff;
    justify-content: center;
    padding: 14 * 2px 0;
    border-radius: 6 * 2px;
    overflow: hidden;
    &-text {
      font-size: 15 * 2px;
      font-weight: 590;
      color: #fff;
    }
  }
}

.other {
  background-color: #fff;
  border-radius: 16 * 2px;
  margin: 10 * 2px 15 * 2px;
  padding: 15 * 2px 10 * 2px;
  &-list {
    margin-top: 8 * 2px;

    &-item {
      padding: 12 * 2px 8 * 2px 12 * 2px 8 * 2px;
      border-bottom: 2px solid rgba(115, 119, 128, 0.15);

      &-notBorder {
        border: none;
      }

      &-top {
        margin-bottom: 8 * 2px;
        justify-content: space-between;
        &-title {
          font-size: 13 * 2px;
          color: #141924;
          font-weight: 510;
          word-break: break-word;
        }
        &-jt {
          width: 18 * 2px;
          height: 18 * 2px;
        }
      }
      &-bottom {
        font-size: 12 * 2px;
        color: #999da7;
        word-break: break-word;
      }
    }
  }
}

.descview {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #f4f5f7;
  position: relative;
  &-bottom {
    padding-bottom: 70 * 2px;
  }
  &-bottom-iphonex {
    padding-bottom: 105 * 2px;
  }
  .content {
    background: linear-gradient(
      180deg,
      #e5f1ff 0%,
      rgba(236, 245, 255, 0) 100%
    );
    background-size: 100vh 250 * 2px;
    background-repeat: no-repeat;
  }
  .group {
    margin: 0 15 * 2px;
    margin-bottom: 10 * 2px;
    padding: 15 * 2px 10 * 2px;
    border-radius: 12 * 2px;
    background-color: #fff;
    &-row-first {
      background: linear-gradient(
        90deg,
        #007bff 0.34%,
        #00b2ff 100%
      ) !important;
      background-repeat: no-repeat;
    }

    &-title {
      font-size: 30px;
      font-weight: 590;
      color: #141924;
    }
    &-text {
      color: #141924;
      font-size: 13 * 2px;
      line-height: 18 * 2px; /* 138.462% */
      letter-spacing: -0.4px;
      word-break: break-word;
    }
    .col {
      background-color: #f0f7ff;
      width: 200px;
      text-align: center;
      color: #141924;
      font-size: 13 * 2px;
      height: 90px;
      line-height: 90px;
      &-rightview {
        margin-left: 20 * 2px;
        &-title {
          font-size: 13 * 2px;
          color: #141924;
          margin-bottom: 8 * 2px;
          line-height: initial;
        }
        &-bottom {
          width: fit-content;
          padding: 2 * 2px 6 * 2px;
          border-radius: 100px;
          background-color: #dfeeff;
        }
        &-icon {
          width: 14 * 2px;
          height: 14 * 2px;
          margin-right: 5 * 2px;
        }
        &-text {
          font-size: 11 * 2px;
          line-height: initial;
          color: #007bff;
        }
      }
      &-yd {
        margin-left: 30 * 2px;
        width: 38 * 2px;
        height: 38 * 2px;
        // background: #007bff;
      }
      &-first-row {
        background-color: transparent;
        color: #fff;
        font-weight: 590;
      }
      &-first {
        width: 180px;
        justify-content: center;
        // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      &-left-radius {
        border-top-left-radius: 24px;
      }
      &-center {
        // border-left: 1px rgba(0, 0, 0, 0.1) solid;
        // border-right: 1px rgba(0, 0, 0, 0.1) solid;
        // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      &-end {
        width: 173 * 2px;
        // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      &-right-radius {
        border-top-right-radius: 24px;
      }
    }
    .desc {
      color: #999da7;
      font-size: 12 * 2px;
      letter-spacing: -0.2px;
      word-break: break-word;
    }
  }
  .box {
    padding: 20 * 2px;
    // padding-bottom: 0;
    background-color: #fff;
    border-radius: 24px;
    &-icon {
      width: 38 * 2px;
      height: 38 * 2px;
      margin-right: 16 * 2px;
    }
    &-right {
      width: calc(100% - 38 * 2px - 16 * 2px);
    }
    &-title {
      font-size: 26px;
      color: #007bff;
    }
    &-bdcview {
      width: 100%;
      &-bdc {
        color: #007bff;
        font-size: 13 * 2px;
        padding: 4 * 2px 8 * 2px;
        min-width: 58 * 2px;
        &-icon {
          margin-top: 2 * 2px;
          margin-left: -4 * 2px;
          margin-right: 2 * 2px;
          width: 18 * 2px;
          height: 18 * 2px;
        }
      }
    }

    &-value {
      margin-top: 12 * 2px;
      font-size: 13 * 2px;
      color: #606a7e;
    }
    &-between {
      padding-bottom: 10 * 2px;
      border-bottom: 1.5 * 2px solid #f5f5f5;
      margin-bottom: 10 * 2px;
    }
  }
}
.pb12 {
  padding-bottom: 12 * 2px;
}
.bottom-radius {
  border-bottom-left-radius: 12 * 2px;
  border-bottom-right-radius: 12 * 2px;
}
.pt10 {
  padding-top: 10 * 2px;
}
.mb10 {
  margin-bottom: 10 * 2px;
}
.items-start {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10 * 2px;
}
</style>
